<!--  -->
<template>
    <div>
       <!-- 表格子组件 -->
       <ETable v-bind="tableConifg" ref="table">
          <template #search="{ params, search }">
             <el-form :inline="true" class="demo-form-inline">
 
                <el-form-item label="机构名称">
                   <el-input v-model="params.name" placeholder="Approved by" clearable />
                </el-form-item>
 
                <el-form-item label="管理员名字">
                   <el-input v-model="params.adminName" placeholder="Approved by" clearable />
                </el-form-item>
                <el-form-item>
                   <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
             </el-form>
          </template>
 
          <template #buttons="{ delAll }">
             <el-button type="primary" @click="add">添加</el-button>
             <el-button type="danger" @click="delAll">批量删除</el-button>
          </template>
 
          <template #operation="{ row, del }">
             <el-button link type="primary" @click="resetPwd(row.id)">重置密码</el-button>
             <el-button link type="primary" @click="edit(row.id)">编辑</el-button>
             <el-button link type="danger" @click="del(row.id)">删除</el-button>
          </template>
       </ETable>
    </div>

    <CompanyAdd :dialogVisible="dialogVisible" :changeId="isId" :changeParent="changeParent" @closeDialog="closeDialog" />

    <ResetPwd :dialogVisible="dialogVisibleResetPwd" :changeId="isIdResetPwd" :changeParent="changeParentResetPwd" @closeDialogResetPwd="closeDialogResetPwd" />
 </template>
 
 <script lang='ts' setup>
 import { reactive, toRefs, ref, onMounted } from 'vue'
 import ETable, { type TableType } from '../../components/ETable.vue';
 import { delCompany, delCompanys, getCompanys } from '@/apis/company/company';
 import CompanyAdd from './CompanyAdd.vue';
 import ResetPwd from '../../components/ResetPwd.vue';

 // 操作子组件中的数据
const table=ref();
 
 const tableConifg: TableType = {
    loadData: getCompanys,
    columns: [
       { prop: 'id', label: 'ID' },
       { prop: 'name', label: '机构名称' },
       { prop: 'address', label: '区域' },
       { prop: 'adminName', label: '管理员名字' },
       { prop: 'telephone', label: '联系电话' },
       { prop: 'adminUserName', label: '管理员账号' },
       { prop: 'operation', slot: true, label: '操作', width: "200" }
    ],
    delelte: delCompany,
    delelteAll: delCompanys
 }
// 添加弹出页标记
const dialogVisible = ref(false)
const dialogVisibleResetPwd = ref(false)

// 传给子组件的方法
const changeParent = (val:boolean)=>{
    dialogVisible.value = val
    // getList()
}
const changeParentResetPwd = (val:boolean)=>{
    dialogVisibleResetPwd.value = val
    // getList()
}

const closeDialog = (val:boolean)=>{
   if(!val){
      table.value.getData()
   }
}
const closeDialogResetPwd = (val:boolean)=>{
   if(!val){
      table.value.getData()
   }
}

let isId = ref<number>(0)
 const add = () => {
   isId.value = 0;
    dialogVisible.value=true
    // console.log('父组件点击添加事件',dialogFormVisible.value);
 }

 
 const edit = (id: number) => {
   dialogVisible.value=true
   isId.value = id
   // console.log(isId.value);
   
 }

 let isIdResetPwd = ref<number>(0)
 const resetPwd = (id: number) => {
   dialogVisibleResetPwd.value=true
   isIdResetPwd.value = id
   // console.log(isId.value);
   
 }
 </script>
 <style scoped></style>